<template>
    <div class="comment-list-container">
       <van-cell title="全部评论" />
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
        >
            <comment-item v-for="(comment,index) in commentLists" 
                :key="index"  
                :comment="comment" 
                @reply-click="$emit('reply-click',$event)" />
        </van-list>
    </div>
</template>

<script>
import { getComments } from '@/api/comment'
import commentItem from './comment-item'
    export default {
        name: 'commentList',
        props:{
            //评论类型，a-对文章(article)的评论，c-对评论(comment)的回复
            type:{
                type: String,
                default: 'a'
            },
            source:{
                type: [String, Number, Object],
                required: true
            },
            commentLists:{
                type: Array,
                // props的默认数组，需要通过函数返回一个数组
                // default(){
                //     return []
                // }
                default: () => []
            }
        },
        components:{
            commentItem
        },
        data() {
            return {
                // commentLists: [],
                loading: false,
                finished: false,
                offset: null, //页码
                limit: 10 //每一页大小
            }
        },
        methods: {
            async onLoad() {
                // 1.请求接口数据
                const { data } = await getComments({
                    type: this.type, //评论类型，a-对文章(article)的评论，c-对评论(comment)的回复
                    source: this.source.toString(), //源id，文章id或评论id
                    offset: this.offset,  //获取评论数据的偏移量，值为评论id，表示从此id的数据向后取，不传表示从第一页开始读取数据,页码
                    limit: this.limit  //获取的评论数据个数，不传表示采用后端服务设定的默认每页数据量
                })
                // console.log(data.data)
                this.$emit('update-comments-count', data.data.total_count)
                // 2.数据赋值
                this.commentLists.push(...data.data.results)
                // 3.关闭loading false
                this.loading = false
                // 4.判断是否还有数据
                if(data.data.results.length){
                     // 假如有则加载数据
                     this.offset = data.data.last_id
                }else{
                    // 假如没有则finished设置为true
                    this.finished = true
                }
            }
        }  
    }
</script>

<style lang="less" scoped>
.comment-list-container{
    background-color: #fff;
}
</style>